<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="mytable" width="200px" border="1">
			<tbody>
				
			</tbody>
			<!-- <caption>考试成绩单</caption>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>英语</th>
				<th>数学</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			<tr> 
				<td>平均</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr> -->
		</table>
		
		<script type="text/javascript">
			//写javascript脚本语言
			//直接写，默认会在页面加载的时候运行
			/*
				1.用js获取html元素。是通过javascript对象的document来操作
					document：即表示当前的html页面的对象
					常用方法：
					getElementById("元素id")：返回是标签对象
					getElementByClassName():ClassName指HTML的class属性，返回的是标签数组
										数组使用[]，可以保存多个数据
					getElementByName():Name指的是html的name属性，返回的是标签数组
					getElementByTagName(): TagName指的是标签名称
					getElementByTagNameNS
			*/
		   
			/*
				JS定义变量
					关键字：var和let
					格式：关键字  变量名 [=初值];
					var和let的区别
						1.let是ES6的标准；var是ES5的标准
						2.let是块级作用域，即作用域只在{}范围内
						3.var是全局作用域
						
					使用变量的目的
						只是为了方便而已（没有别的）
			*/
		   
		 //    console.log(a);
			// let a = 1;
			console.log(table);//undefined：表示没有被赋值
			//引用  =   对象
			var table = document.getElementById("mytable"); //表示已经获取了id为mytable的标签
			// console.log(document.getElementById("mytable))
			console.log(table);//table对象
			//2.加上表头，使用document创建元素
			let caption = document.createElement("caption");
			caption.innerText = "考试成绩单";
			table.appendChild(caption);
			
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			
			let thead = document.createElement("thead");
			//将head标签的引用thead，附加到table中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let th = document.createElement("th");
			th.innerText = "姓名";//插入文本
			// th.innerHTML = "<em>姓名</em>"//插入的是html代码,没有必要，就不要用
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "语文";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "数学";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "英语";
			tr.appendChild(th);
			/* 
			// 小明
			tr = document.createElement("tr");
			thead.appendChild(tr);
			let td = document.createElement("td");
			td.innerText = "小明";//插入文本
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			
			// 小红
			tr = document.createElement("tr");
			thead.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "小红";//插入文本
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			
			// 小杰
			let tr4 = document.createElement("tr");
			thead.appendChild(tr4);
			let tr4_td1 = document.createElement("td");
			tr4_td1.innerText = "小杰";//插入文本
			// th.innerHTML = "<em>姓名</em>"//插入的是html代码,没有必要，就不要用
			let tr4_td2 = document.createElement("td");
			tr4_td2.innerText = "100";
			let tr4_td3 = document.createElement("td");
			tr4_td3.innerText = "100";
			let tr4_td4 = document.createElement("td");
			tr4_td4.innerText = "100";
			
			tr4.appendChild(tr4_td1);
			tr4.appendChild(tr4_td2);
			tr4.appendChild(tr4_td3);
			tr4.appendChild(tr4_td4); */
			
			/*
				数组
					用处：保存多个数据
					定义：var/let 数组名 [= 初值];
						1.let arr = new Array();//定义一个空数组
						2.let arr = [];//效果同上
					长度数学：length，获取数组的长度，即该数组的元素总数
						具体使用：数组名.length
					遍历：一个接一个操作，即为遍历，一般需要配合循环使用
				循环
					for(声明部分；条件部分；迭代部分){循环体}
					for循环
						格式：for(let i = 0; i < arr.length; i++){}
							i：表示数组的索引，索引要求>=0。
					for-in循环
						格式：for(let item : 数组名){}
							item：表示数组中的元素。
					do-while循环：至少执行一次
						格式：do{
									循环体
									迭代部分
								}(条件部分);
		
			*/
			let arrNames = ["小明","小红","小杰"];
			let arrYuWens = [80,60,100,];
			let arrShuXues = [80,90,100];
			let arrYingYus = [80,90,100];
			let len = arrNames.length;
			let totalYuWen = 0;
			let totalShuXue = 0;
			let totalYingYu = 0;
			let avgYuWen = 0;
			let avgShuXue = 0;
			let avgYingYu = 0;
			for(let i = 0; i < len; i++){
				//小明
				tr = document.createElement("tr");
				tbody.appendChild(tr);
				let td = document.createElement("td");
				td.innerText = arrNames[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrYuWens[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrShuXues[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrYingYus[i];
				tr.appendChild(td);
				
				totalYuWen += arrYuWens[i];
				totalShuXue += arrShuXues[i];
				totalYingYu += arrYingYus[i];
			}
			
			avgYuWen = totalYuWen / len;
			avgShuXue = totalShuXue / len;
			avgYingYu = totalYingYu / len;
			
			/*平均数*/
			tr = document.createElement("tr");
			thead.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "平均";//插入文本
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgYuWen;
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgShuXue;
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgYingYu;
			tr.appendChild(td);
			
			//写在函数中，然后通过HTML标签的事件来触发
		</script>
	</body>
</html>
